<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui">
    <div id="layout-topbar">
    	<div id="logo" class="Fleft">
            <h:link outcome="/">
                <img src="#{resource['rio-layout:images/logo.svg']}" class="Fleft" />
            </h:link>
            <a id="mobile-menu-button" class="Fright ShowOnMobile ripplelink Unselectable ShadowEffect"><i class="icon-add186"/></a>
        </div>

        <a class="ripplelink WhiteBlue Fright ShowOnMobile" id="show-top-menu"><i class="icon-show8"/></a>

        <ul id="top-menu" class="ShowOnDesktop">
            <li>
                <a class="ripplelink"><i class="icon-search100"/> <span class="Txt">Search</span></a>
                <ul>
                    <li><input type="text" placeholder="Search"/></li>
                </ul>
            </li>
            <li>
                <a class="ripplelink"><i class="icon-set6"/> <span class="Txt">Tasks</span></a>
                <ul>
                    <li><a href="#">23 New Tasks</a></li>
                </ul>
            </li>
            <li>
                <a class="ripplelink"><i class="icon-notifications1"/> <span class="Txt">Alerts</span></a>
                <ul>
                    <li><a href="#">18 Alerts</a></li>
                </ul>
            </li>
            <li><a href="#" class="ripplelink"><i class="icon-wifi83"/> <span class="Txt">System Settings</span></a></li>
        </ul>
    </div>
</ui:composition>
